<script setup lang="ts">
import { QBtn } from "quasar";
import { computed } from "vue";

import {} from "qqlx-core";
import {} from "qqlx-cdk";

const vueProps = defineProps<{
  icon?: string;
  flat?: boolean;
  active?: boolean;
  type?: string;
}>();

const colors = computed(() => {
  const base = `rounded px-2`;
  if (vueProps.flat) return `${base}`;
  else if (vueProps.active) return `${base} bg-primary text-white`;

  return `${base} bg-white`;
});
</script>

<template>
  <q-btn :type="vueProps.type || 'button'" :class="colors" :icon="vueProps.icon" :flat="vueProps.flat" :outline="!vueProps.active" unelevated>
    <slot></slot>
  </q-btn>
</template>
